<template>
	<view class="">
			<u-navbar title='Top 10' :autoBack="true" bgColor="transparent"></u-navbar>
				<image src="https://renovationcdn.jiachuangnet.com/talentPool/bg6.png"
					style="width: 100%;height:363rpx;position: absolute;top:0;left:0;z-index: 10"></image>
				<view style="position: absolute;width:700rpx;left:25rpx;top:215rpx;z-index: 11;">
					<view class="content">
						<view v-for="(v,i) in talentList" :key="i" class="item" @click="toPath(v.userId)">
							<view class="master_wrapper ">
								<view class="master_left" style="position: relative;">
									<image :src="'https://'+v.avatar" mode="" style="width: 108rpx;height: 108rpx;border-radius: 50%;" ></image>
									<view class="score">
										{{v.score}}分
									</view>
									<image v-if="i==0" src="https://renovationcdn.jiachuangnet.com/talentPool/hg3.png" mode="" style="width: 46rpx;height: 34rpx; position: absolute;top: -20rpx;left: -10rpx;transform: rotate(-40deg);"></image>
									<image  v-if="i==1" src="https://renovationcdn.jiachuangnet.com/talentPool/hg1%202.png" mode="" style="width: 46rpx;height: 34rpx; position: absolute;top: -20rpx;left: -10rpx;transform: rotate(-40deg);"></image>
									<image v-if="i==2" src="https://renovationcdn.jiachuangnet.com/talentPool/hg2%20%E6%8B%B7%E8%B4%9D.png" mode="" style="width: 46rpx;height: 34rpx; position: absolute;top: -20rpx;left: -10rpx;transform: rotate(-40deg);"></image>
								</view>
								<view class="master_right">
									<view class="flex" style="padding: 11rpx 0;">
										<view class="flex" style="width: 350rpx;">
											<text class="name">{{v.nickName}}</text>
											<text class="post">{{v.roleName}}</text>
											<span class="verity">已实名</span>
										</view>
										<u-icon name="arrow-right"></u-icon>
									</view>
									<view class="flex" style="padding: 11rpx 0;">
										<view class="flex" style="justify-content: start;vertical-align: middle;">
											<u-icon name="phone-fill" color="#f79e1b" style="width: 24rpx;height: 26rpx;"></u-icon>
											<text class="phone text" style="padding-right: 25rpx;">电话:{{v.phone}}</text>
										</view>
										<view class="flex">
											<image src="https://renovationcdn.jiachuangnet.com/talentPool/zhengshu.png" mode="" style="width: 24rpx;height: 28rpx;"></image>
											<span class="verity_text" style="padding-left: 10rpx;">技能证书</span>
										</view>
									</view>
									<view class="introduce" style="padding: 11rpx 0;">
										{{v.introduction}}
									</view>
									<view class="flex" style="padding: 11rpx 0;justify-content: start;">
										<text class="text" style="padding-right: 25rpx;">评分</text>
										<view class="flex">
											<u-icon name="star-fill" color="#F79E1B" size="24" v-for="j in v.allStar" :key="j"></u-icon>
											<img src="https://renovationcdn.jiachuangnet.com/talentPool/star%2018.png" v-if="v.halfStar" alt="" style="width: 20px;height: 20px;">
											<u-icon name="star-fill" color="#fcd8a4" size="24" v-for="k in v.noStar" :key="k" ></u-icon>
										</view>
									</view>
									<view class="flex">
										<view class="text">
											订单量:{{v.orderNum}}个
										</view>
										<view class="text" v-show="longitude&&latitude">
											距离:{{getDistances(v.latitude,v.longitude).km||0}}Km
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view style="width: 100%;height: 50vh;" v-if="talentList.length===0">
						<u-empty
						        icon="https://renovationcdn.jiachuangnet.com/empty.jpg"
								width="100%"
								height="100%"
								text="数据为空"
						>
						</u-empty>
					</view>
				</view>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				color: '#c7ccd3',
				pageNumber:1,
				pageSize:10,
				talentList:[],
				longitude:0,
				latitude:0
			}
		},
		onShow() {
			this.talentList=[]
			this.pageNumber=1
			this.getTalentList()
			uni.getLocation({
			  type: 'wgs84', // 坐标类型，默认为wgs84，可选的值为gcj02和bd09ll
			  success: res => {
			    // 获取成功，经度和纬度在res.longitude和res.latitude中
				this.longitude=res.longitude
				this.latitude=res.latitude
			  },
			  fail: err => {
			    // 获取失败，err为错误信息
			    console.log('getLocation err:', err);
			  }
			});
		},
		onReachBottom() {
			this.pageNumber++;
			this.getTalentList()
		},
				methods: {
					// 根据经纬度计算距离，参数分别为第一点的纬度，经度；第二点的纬度，经度
					getDistances(lat2, lng2) {
						if(this.latitude&&this.longitude){
							let EARTH_RADIUS = 6378.137;// 地球半径
							let radLat1 = this.latitude * Math.PI / 180.0; //lat1 * Math.PI / 180.0=>弧度计算
							let radLat2 = lat2 * Math.PI / 180.0;
							let a = radLat1 - radLat2;
							let b = this.longitude * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
							let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
							s = s * EARTH_RADIUS; 
							s = Math.round(s * 10000) / 10000;// 输出为公里
							return { m: s * 1000, km: Number(s.toFixed(2)) }
						}else{
							return { m: 0, km: 0 }
						}
						
						
						
					},
					toPath(id){
						uni.navigateTo({
							url:`/pages/talentDetails/index?userId=${id}`
						})
					},
					getTalentList(){
						return uni.$u.http.get('/talent/getTalentList',{
							params:{
								pageNumber:this.pageNumber,
								pageSize:this.pageSize,
							}
						}).then((res)=>{
							if(res){
								const handlerScoreAfterObj=res.map(item=>{
									if(item.score==0){
										item.allStar=0
										item.noStar=5
										item.halfStar=0
									}else{
										const v = item.score.toString().split('.')
										item.allStar=Number(v[0]); 
										if(v[1]&&v[1]!=0){
											item.halfStar=1
										}else{
											item.halfStar=0
										}
										item.noStar=5-(item.allStar+item.halfStar)>0?5-item.allStar:0
									}
									return item
								})
								this.talentList=[...this.talentList,...handlerScoreAfterObj]
							}
						})
					},
		
				}
	}
</script>

<style>
page{
background:#f8f8f8;
}
</style>
<style lang="scss" scoped>
	.score{
		font-weight: bold;
		font-size: 28rpx;
		color: #ED115E;
		margin-left: 20rpx;
	}
	.flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.border {
		border: 1rpx solid #eee;
		border-radius: 40rpx;
		overflow: hidden;
	}
	.content {
		width: 700rpx;
		margin: 0 auto;
	}

	.item {
		width: 660rpx;
		padding: 20rpx;
		background-color: white;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		margin-top: 20rpx;
		border-radius: 10rpx;
	}

	.label {
		color: #999;
		width: 180rpx;
		font-size: 28rpx;
		font-weight: 400;
	}

	.val {
		color: #333;
		font-size: 28rpx;
		max-width: 70%;
	}

	.master_wrapper{
		display: flex;
		padding: 10rpx 11rpx;
		.master_left{
			flex:1;
			margin-top: 11rpx;
		}
		.master_right{
			.text{
				font-weight: 500;
				font-size: 28rpx;
				color: #1E272E;
			}
			width: 560rpx;
			padding-left: 16rpx;
			.name{
				font-weight: bold;
				font-size: 30rpx;
				color: #1E272E;
			}
			.post{
				font-weight: 500;
				font-size: 26rpx;
				color: #1E272E;
			}
			.verity{
				width: 86rpx;
				line-height: 38rpx;
				background: #13989A;
				border-radius: 10rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				text-align: center;
			}
			.introduce{
				font-weight: 500;
				font-size: 26rpx;
				color: #8A8A8A;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
		
	}
</style>